<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div v-loading="treeLoading" class="tree">
          <el-tree ref="tree" :data="treeData" default-expand-all :expand-on-click-node="false">
            <span slot-scope="{ node, data }" class="custom-tree-node tree-line">
              <span v-if="data.children">
                <i :class="data.icon"></i>
                <span>{{ node.label }}</span>
              </span>
              <el-radio-group v-else v-model="activetree" @change="change1">
                <el-radio :label="data.value">
                  <span>{{ node.label }}</span>
                </el-radio>
              </el-radio-group>
            </span>
          </el-tree>
        </div>
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">检验时间</span>
                  <el-date-picker v-model="value1" size="medium" type="datetimerange" unlink-panels start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card" style="padding-top: 10px">
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark">
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <span v-if="item.label == '固含量'">
                        {{scope.row.solidContent}}
                      </span>
                      <span v-else-if="item.label == 'ID'">{{
                        scope.$index + 1
                        }}</span>
                      <span v-else-if="item.label == '检验历史'">
                        <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIANYLS'))!==-1" class="bottom_one" size="mini" @click="look3Fun(scope.row)">
                          检验记录
                        </el-button>
                        <!-- <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIANYLS'))!==-1" class="table_link" :underline="false" @click="look3Fun(scope.row)">检验记录</el-link> -->
                      </span>
                      <span v-else-if="item.label == '操作'">
                        <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIANCELR'))!==-1" class="bottom_one" size="mini" @click="open(scope.row, 'Dialog2')">
                          检测录入
                        </el-button>
                        <!-- <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='JIANCELR'))!==-1" class="table_link" :underline="false" @click="open(scope.row, 'Dialog2')">检测录入</el-link> -->
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 检测查看 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog1" width="760px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">检测查看</span>
      <div>
        <el-form :inline="true" label-width="110px">
          <el-form-item>
            <span slot="label">公司：</span>
            <div style="width: 240px">{{ low.companyName }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">站点：</span>
            <div style="width: 240px">{{ low.stationName }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">浆水池：</span>
            <div style="width: 240px">{{ low.name }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">固含量(%)：</span>
            <div style="width: 240px">{{ low.solidContent }}</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog1 = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 检测录入 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog2" width="760px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">检测录入</span>
      <div>
        <el-form ref="reffromDate" :rules="rules" :inline="true" :model="low" label-width="110px">
          <el-form-item>
            <span slot="label">公司</span>
            <div style="width: 240px">{{ low.companyName }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">站点</span>
            <div style="width: 240px">{{ low.stationName }}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">浆水池</span>
            <div style="width: 240px">{{ low.name }}</div>
          </el-form-item>
          <el-form-item prop="solidContent">
            <span slot="label">固含量(%)</span>
            <el-input v-model="low.solidContent" type="Number" oninput="if(value>100)value=100" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog2 = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submit2()">提交录入</el-button>
      </span>
    </el-dialog>
    <!-- 检验记录 -->
    <el-dialog v-dialogDrag :visible.sync="look3Type" width="760px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">检验记录</span>
      <div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="arrList3" tooltip-effect="dark">
          <el-table-column label="检查时间" align="center" prop="createTime"> </el-table-column>
          <el-table-column label="结果" align="center" prop="result"></el-table-column>
          <el-table-column label="检测人" align="center" prop="createUserName"></el-table-column>
        </el-table>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <div class="top_page_totle">总共{{ arrList3Param.total }}条</div>
            <el-pagination :current-page.sync="arrList3Param.page" :page-size="arrList3Param.pageSize" layout="prev, pager, next, jumper" :total="arrList3Param.total" @current-change="gettableData()"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look3Type = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryPage, saveOrUpdate, queryDetectoinLogPage } from "@/api/smart/watertest.js";
import { getUserAutList } from "@/api/common.js";
export default {
  mixins: [mixin],
  data() {
    return {
      UserInfo: '',
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      saveOrUpdate: saveOrUpdate,
      /*表格数据*/
      table: [
        { label: "ID", width: "auto", prop: "", status: true },
        { label: "公司", width: "auto", prop: "companyName", status: true },
        { label: "站点", width: "auto", prop: "stationName", status: true },
        { label: "浆水池", width: "auto", prop: "name", status: true },
        {
          label: "检验时间",
          width: "auto",
          prop: "detectionTime",
          status: true,
        },
        { label: "固含量", width: "auto", prop: "", status: true },
        { label: "检验记录", width: "auto", prop: "", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex
       */
      treeData: [],
      activetree: "",
      pagesType: 1,
      Dialog1: false,
      Dialog2: false,
      rules: {
        solidContent: [
          { required: true, message: "请输入固含量", trigger: "blur" },
        ],
      },
      fromDate: {
        solidContent: "",
        id: "",
      },
      low: {},
      value1: [],
      look3Type: false,
      arrList3: [],
      arrList3Param: {
        detectionId: '',
        page: 1,
        pageSize: 5,
        total: 0,
      }
    };
  },
  async created() {
    this.treeData = await getUserAutList()
    this.treeLoading = false;
    this.activetree = this.treeData[0].children[0].value;
    this.tableParam.stationId = this.treeData[0].children[0].value;
    this.tableParam = { ...this.tableParam, createTime: "", updateTime: "" };
    /*存储拷贝的原初始化fromDate数据*/
    await this.gettableData();
  },
  watch: {
    value1() {
      if (this.value1) {
        this.tableParam.startTime = this.value1[0];
        this.tableParam.endTime = this.value1[1];
      } else {
        this.tableParam.startTime = ''
        this.tableParam.endTime = ''
      }
    },
  },
  methods: {
    look3Fun(e) {
      this.look3Type = true
      this.arrList3Param.detectionId = e.id
      queryDetectoinLogPage(this.arrList3Param).then((res) => {
        this.arrList3 = res.data.data
        this.arrList3Param.total = res.data.totalRows
      })
    },
    change1() {
      this.tableParam.stationId = this.activetree;
      this.tableParam.page = 1;
      this.init();
    },
    init() {
      /*重置数据*/
      this.value1 = [];
      this.tableParam.createTime = "";
      this.tableParam.updateTime = "";
      this.gettableData();
    },
    open(low, key) {
      this[key] = true;
      this.low = this.copy(low);
      setTimeout(() => {
        this.$refs.reffromDate.clearValidate();
      }, 100);
    },
    submit2() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          this.fromDate.id = this.low.id;
          this.fromDate.solidContent = this.low.solidContent;
          _this.Dialog2 = false;
          _this.submitFromDate();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
